<script>
  export default {
    name: 'VwRow',
    props: {
      tag: {
        type: String,
        default: 'div'
      },
      gutter: {
        type: Number,
        default: 0
      },
      type: String,
      justify: {
        type: String,
        default: 'start'
      },
      align: {
        type: String,
        default: 'top'
      }
    },
    computed: {
      getRowFutterStyle() {
        if (this.gutter == 0) return ''
        const value = -(this.gutter / 2)
        return {
          marginLeft: value + 'px',
          marginRight: value + 'px'
        }
      }
    },
    render(h) {
      return h(
        this.tag,
        {
          style: this.getRowFutterStyle,
          class: [
            'vw-row',
            this.justify !== 'start' ? `vw-justify-${this.justify}` : '',
            this.align !== 'top' ? `vw-align-${this.align}` : '',
            { 'vw-row--flex': this.type === 'flex' }
          ]
        },
        this.$slots.default
      )
    }
  }
</script>

<style lang="scss">
  .vw-row::before,
  .vw-row::after {
    display: table;
    content: '';
  }

  .vw-row::after {
    clear: both;
  }
  .vw-row--flex {
    display: flex;
  }
  @each $justify in start, center, space-between, space-evenly, space-around,
    flex-end
  {
    .vw-justify-#{$justify} {
      justify-content: #{$justify};
    }
  }
  .vw-align-top {
    align-items: flex-start;
  }
  .vw-align-center {
    align-items: center;
  }
  .vw-align-bottom {
    align-items: flex-end;
  }
</style>
